<template>
  <div class="pre_order">
    <h1 class="confirm-title" style="line-height:40px">确认订单</h1>
    <el-table :data="currentProduct" >

      <el-table-column prop="date" label="充值产品" align="center">
        <template v-slot="{ row }">
            <img style="height:20px;width:60px" :src="row.imageUrl" alt="">&nbsp;
            <span>{{row.productName}}</span>
            <br/>
            <span>{{row.description}}</span>
        </template>
      </el-table-column>

      <el-table-column prop="price" label="单价" align="center" style="width:50px; ">
        <template v-slot="{row}">
            <span style="color:red; font-weight:bolder">
                {{row.price}}
            </span>
        </template> 
      </el-table-column>

      <el-table-column  label="数量"  style="width:50px"> 
        <template v-slot="{row}">
            <el-input-number v-model="quantity" size="mini" :min="1" :max="100000000" label="描述文字"></el-input-number>
        </template>
      </el-table-column>

      <el-table-column  label="小计" align="left"> 
        <template v-slot="{row}">
            <span class="total_fee" style="color:red font-weight:bolder">{{total_fee}}</span>
        </template>
      </el-table-column>
    </el-table>
    <!-- ---- -->
    <div class="box">
        <h2>实付款：￥<span style="color:red">{{total_fee}}</span></h2>
        <h2>充值详情：<span style="color:gold">{{description}}</span></h2>
        <h2>充值账户：<span style="color:red">{{userInfo.username}}</span></h2>
    </div>
    <el-row style="line-height:none">
     <el-button @click="commitOrder" type="primary">提交订单</el-button>
    </el-row>
  </div>
</template>

<script>
import * as api  from "@/api/tarnsaction";
import storage from "@/utils/storage";
export default {
      meta:{
        title: '',
        name:"预支付"
    },
    data(){
        return {
            product_id:"",
            currentProduct:[],
            quantity:1,//数量
            description:"",
            userInfo:{}
        }
    },
    created() {
        // 获取query参数
        let {product_id} = this.$route.query
        this.product_id=product_id
        this.userInfo=storage.get("userInfo")
        api.getVipProductDetails(product_id)
        .then(res=>{
            // console.log(res)
            this.currentProduct=res.data.data
            this.description=res.data.data[0].description 
        })
    },
    computed:{
        total_fee(){
            return (this.quantity*this.currentProduct[0]?.price).toFixed(2)
        },
        
    },
    methods:{
      commitOrder(){
          this.$confirm("您是否确认购买" +this.currentProduct[0].productName +",商品总价格为："+ this.total_fee, "确认订单",{
            confirmButtonText: '确定下单',
            cancelButtonText: '取消',
            type: 'info'
          })
          .then(()=>{
            // 调用下单接口
            api.PreOrder(this.product_id,this.quantity)
            .then(res=>{
              // console.log(res)
              if(res.data.state){
                // 下单成功，获取订单id
                let {order_id}=res.data
                // 跳转到支付页面，携带订单号
                this.$router.push({name:"home-payment-pay",query:{order_id}})
              }
            })
          })
          .catch(()=>{
            this.$message.error('已取消下单')
          })
      }
    }
};
</script>
<style scoped lang="less">
.box{
  border:2px solid red;
  width:700px;
  height:200px;
  line-height:40px;
  text-align:right;
  margin-left:580px;
}
/deep/.el-row{
  line-height:40px;
  text-align:right;
}
</style>